[Day20](jQuery)timepicker日期外掛介紹

第 11 屆 iThome 鐵人賽

DAY 20

自我挑戰組

ArasPLM開發分享系列第 20 篇

11th鐵人賽

JamesLee

2019-09-28 00:38:56

8743 瀏覽

分享至

今天要介紹的是利用jQuery與timpicker日期外掛來達成在欄位中選擇日期的功能

HTML

首先要在head的區域先引入jquery和timpicker的.css與.js檔
接下來body的區域建立2個text用來點擊顯示timpicker以及一個button用來alert出結果

JavaScript

接著是javascript的部分，在中建立opt用來定義timepicker的日期格式(這邊所介紹的格式為Aras資料庫中日期的格式)，再利用jQuery將timpicker加入至text欄位當中
建立一個function使用jQuery抓取start與end的text內容，並且alert顯示出來，再利用jQuery觸發button按鈕將function執行

<html>

    <head>

        <script type="text/javascript" src="jquery/jquery.js"></script>
        <script type="text/javascript" src="jquery/jquery-ui.js"></script>
        <link  rel="stylesheet" href="jquery/jquery-ui-timepicker-addon.css"></link>
        <script type="text/javascript" src="jquery/jquery-ui-timepicker-addon.js"></script>
        <link rel="stylesheet" href="jquery/jquery-ui.css"></link>

    </head>

    <body>

        <div id="ShowBlock">
          <p><span>Start Date </span><input type="text" name="start" id='start' value=""/></p>
            <p><span>End Date</span><input type="text" name="end" id='end' value="" /></p>
        </div>

        <div class="contents">
            <input class="button" type="button" id="show_button"value="Click">  
        </div>

    </body>

</html>

<script>
    var opt={dateFormat: 'yy-mm-dd',
                showSecond: true,            
                timeFormat: 'HH:mm:ss',
                separator: 'T',         
            };
            
    $( "#start" ).datetimepicker(opt);
    $( "#end" ).datetimepicker(opt);



    $('#show_button').click(function () {
        show();
    })

    function show(){
        alert("Start : "+$( "#start" ).val()+"\n"+"End : "+$( "#end" ).val());
    }

</script>

最後到網頁頁面當中，點選text的方框就會跳出timepicker的視窗可以選擇日期，選擇好的日期將會填入text內容當中
點選Click按鈕後將可以看到彈跳視窗顯示所選擇的日期資訊
這麼一來我們若是想要將這些日期字串寫入到Aras當中就可以利用先前提到過的Form POST的方式將資料送往後端Controller，再利用IOM C#寫入至Aras的資料庫當中，有興趣的朋友可以看
(https://ithelp.ithome.com.tw/articles/10215364) 的介紹